<!-- 
    @file: 首页center文章模块组件
    @auth: lizibin
 -->
<template>
    <div class="stick_articleBox" v-loading="loading1" element-loading-text="玩命加载中...">
        <div class="contentBox">
            <div class="tagBox">
                <p>
                    <!-- 鼠标点击跳转到分类 -->
                    <span>
                        <el-icon class="tagIcon">
                            <Place />
                        </el-icon>
                        置顶
                    </span>
                </p>
            </div>
            <div class="articleBox-jump" @click="RouterJump('articleDetails', stickArticleInfo[0]?.articleId)">
                <span :title="stickArticleInfo[0]?.articleTitle">
                    <div class="content">
                        <h4 class="title">{{ stickArticleInfo[0]?.articleTitle }}</h4>
                        <img v-if="stickArticleInfo[0]?.articleImgLitimg" class="img"
                            :src="stickArticleInfo[0]?.articleImgLitimg">
                    </div>
                </span>
                <p class="textRight">{{ stickArticleInfo[0]?.articleClassifyName }} · {{
                    stickArticleInfo[0]?.publishTime
                }}
                </p>
            </div>
        </div>
    </div>

    <div class="articleBox" v-for="item in articleInfo" v-loading="loading2" element-loading-text="玩命加载中...">
        <div class="tagBox">
            <p>
                <!-- 鼠标点击跳转到分类 -->
                <span>
                    <el-icon class="tagIcon">
                        <FolderOpened />
                    </el-icon>
                    {{ item.articleClassifyName }}
                </span>
            </p>
        </div>
        <div @click="RouterJump('articleDetails', item.articleId)" class="articleBox-jump">
            <h4 class="title"><span>{{ item.articleTitle }}</span></h4>
            <div class="article">
                <img v-if="item.articleImgLitimg" class="focus" :src="item.articleImgLitimg" :alt="item.articleTitle">
                <!-- 内容样式根据有没有图片改变 -->
                <div class="textBox" :class="[item.articleImgLitimg ? '' : 'textBox2']">
                    <p style="margin-bottom: 25px;">{{ item.articleDase }}</p>
                    <!--<p>小李 · 11月前</p>-->
                    <p class="hidden-sm-and-up">{{ item.userName }} · {{ item.publishTime }}</p>
                    <p class="articleMessage hidden-xs-only"><span>
                            <el-icon>
                                <User />
                            </el-icon>{{ item.userName }}
                        </span>
                        <span>
                            <el-icon>
                                <Timer />
                            </el-icon>{{ item.publishTime }}
                        </span>
                        <span>
                            <el-icon>
                                <View />
                            </el-icon>{{ item.click }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    reactive,
    onMounted,
} from 'vue'
import { SystemSetupHandle, ArticleFiltterBySystem } from '@/utils/utils'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
import { ArticleInfo, Reactive } from '@/types/articleTypes'
import { FormatDate } from '@/utils/time'

import {
    useRouter,
    useRoute
} from 'vue-router';
const router = useRouter()
const RouterJump = (name: string, val: number) => {
    router.push({
        path: name,
        query: {
            id: val
        }
    })
}


const Store = useStore()
const { SystemSetup, AllArticleInfo } = storeToRefs(Store)

const state = reactive<any>({
    // 置顶文章信息
    stickArticleInfo: [],
    // 展示文章信息
    articleInfo: [],
    loading1: false,
    loading2: false
})
/**
 * @desc 加载获取数据
 */
const loadData = async (state: any) => {
    state.loading1 = true;
    state.loading2 = true;

    // 设置
    const { code, data } = SystemSetup.value;
    // 全部文章
    const { code: ACode, data: AData } = AllArticleInfo.value;
    // 展示文章的文章id，数组
    const centerShowArticle = SystemSetupHandle(data.allArticle)
    // 置顶文章id，数组
    
    const stickArticle = data.stickArticle

    // 筛选出系统设置总设置好的展示文章
    ArticleFiltterBySystem(centerShowArticle, AData, state.articleInfo, false)
    
    state.loading2 = false;
    // 筛选置顶文章
    AData.forEach((element: ArticleInfo) => {
        // 时间戳格式化
        element.publishTime = FormatDate(element.publishTime);
        // 图片 根url
        const url = import.meta.env.VITE_HTTP;
        // 缩略图 判断是点击上传的还是，网络图片
        if (element.articleImgLitimg != "" && !element.articleImgLitimg
            .includes('http') && !element.articleImgLitimg
                .includes('https')) {
            element.articleImgLitimg = url + element.articleImgLitimg
        }

        // 筛选出置顶文章
        if (element.articleId === Number(stickArticle)) {
            state.stickArticleInfo.push(element)
        }
        
    })
    
    state.loading1 = false;
}
//挂载后加载数据
onMounted(() => {
    loadData(state);
});
const { stickArticleInfo, articleInfo, loading1, loading2 } = state

</script>

<style  scoped>
/* 置顶文章样式 */
.stick_articleBox {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;

}

.stick_articleBox .contentBox {
    position: relative;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}

.articleBox-jump {
    cursor: pointer;
}

.stick_articleBox .contentBox .content {
    position: relative;
    height: 120px;
    border-radius: 6px;
    padding: 0 25px;
    margin: 10px 0;
    overflow: hidden;
}

.stick_articleBox .contentBox .content .title {
    position: relative;
    z-index: 5;
    height: 120px;
    display: flex;
    align-items: center;
    line-height: 24px;
    color: #fff;
    font-size: 15px;
}

.stick_articleBox .contentBox .textRight {
    text-align: right;
    color: #999;
}

.stick_articleBox .contentBox .content:before {
    content: '';
    background: -webkit-gradient(linear, right top, left top, from(black), to(black));
    background: linear-gradient(to left, black, black);
    background-image: linear-gradient(-225deg, black 0%, black 78%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
    border-radius: 6px;
    color: black;
}

.stick_articleBox .contentBox .content .img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

/* 展示文章样式 */
.articleBox {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid white;
}

.articleBox:hover {
    border: 1px solid #2fa7b9;
}

.tagBox span {
    background: #f6f6f6;
    padding: 3px 6px;
    border-radius: 20px;
    color: #2fa6b8;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
}

.tagIcon {
    margin-right: 5px;
    vertical-align: middle;
    background: #2fa7b9;
    color: white;
    border-radius: 15px;
    padding: 5px;
    font-size: 20px;
}

.articleBox .title {
    font-size: 15px;
    line-height: 45px;
    color: #454545;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    text-align: justify;
}

.title span {
    cursor: pointer;
}

.title span:hover {
    color: #2fa7b9;
}

.articleMessage span {
    font-size: 13px;
    color: #999;
    line-height: 20px;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
}

.articleMessage .el-icon {
    font-size: 15px;
    margin-right: 8px;
}

.article {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.article img {
    width: 140px;
    height: 90px;
    border-radius: 4px;
    object-fit: cover;
    overflow: hidden;
}

.textBox {
    width: 420px;
    height: 100px;
    line-height: 22px;
    font-size: 13px;
    color: #999;
    margin-left: 10px;
}

.textBox2 {
    width: auto;
    margin-left: 0px;
}

.textBox p {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-align: justify;
    margin-bottom: 25px;
    cursor: pointer;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .textBox {
        width: 500px;
    }
}
</style>